<template>
  <div>
    御剑乘风来,除魔天地间!===app
    <hr />
    <ul>
      <li @click="handel1">我是第1个li</li>
      <li @click="handel2">我是第2个li</li>
      <li @click="handel3">我是第3个li</li>
    </ul>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  //想要在主页里面知道自己所点击的跳转页面
  watch: {
    //监听data属性里面的值时也不用this直接拿,同理监听组件的路由值也是可以直接拿,不用this.
    '$route.path' (newVal) {
      console.log(newVal, 777)
      if(newVal=='/second') alert('这是222')

    }
  },
  methods: {
    handel1 () {
      this.$router.push('/?name=rose&id=1').catch(err => { })//在一个页面重复点链接的时候会报错,用catch捕获错误就不会报错了
    },
    handel2 () {
      this.$router.push({
        name: 'Second',
        query: {
          name: 'zhengx',
          age: 18
        }
      }).catch(err => { })
    },
    // handel3 () {
    //   this.$router.push({
    //     name: 'Third',
    //     params: {
    //       ids: '333',
    //       name: 'jack',
    //       hobby: 'listen'
    //     }
    //   }).catch(err=>{})
    // }
    //方法二:如果点击的还是当前页面阻止跳转
    handel3 () {
      if (this.$route.fullPath == '/third/3/rose/read') return
      this.$router.push('/third/3/rose/read')
      // this.$router.go(-1)

    }
  }}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  justify-content: space-around;
  li {
    cursor: pointer;
  }
}
.router-link-exact-active {
  background-color: red;
}
// .aa {background-color:pink;}
</style>
